<template>
  <view class="content">
    <view class="header">
      <u-image
        width="200rpx"
        height="200rpx"
        src="@/static/images/avatar.png"
        style="margin-top: 50rpx"
      ></u-image>
      <text>{{ userName }}</text>
    </view>
    <view class="actions">
      <u-cell-group>
        <u-cell-item title="编辑付款方式"></u-cell-item>
        <u-cell-item title="我的电影票" @click="toTicket"></u-cell-item>
        <u-cell-item title="修改密码"></u-cell-item>
        <u-cell-item title="退出登录" @click="logout"></u-cell-item>
      </u-cell-group>
    </view>
  </view>
</template>

<script lang="ts">
import { defineComponent, ref } from '@vue/composition-api';
import PAGE from '@/const/page';

export default defineComponent({
  setup() {
    const userName = ref('admin');
    return {
      userName,
    };
  },
  methods: {
    toTicket() {
      uni.navigateTo({
        url: PAGE.PERSONAL_TICKET.PATH,
      });
    },
    logout() {
      uni.navigateTo({
        url: PAGE.LOGIN.PATH,
      });
    },
  },
});
</script>

<style lang="scss" scoped>
.header {
  width: 100%;
  height: 300rpx;
  background-image: url('@/static/images/chooseSeat.png');
  background-size: cover;
  line-height: 300rpx;
  display: flex;
  padding-left: 48rpx;

  text {
    font-size: 48rpx;
    color: #fff;
    padding-left: 20rpx;
  }
}
</style>
